<template>
	<view class="player1">
		<view class="wrap">
			<view class="user_info">
				<image :class="{'current':player1.isCurrent}" src="../../static/logo.png"></image>
				<view class="user_text">
					<text class="score">100000</text>
					<text class="username">player1</text>
				</view>
			</view>
			<view v-if="gameStart" class="cardlist">
				<view :style="{'top':upx2px(6*i)+'px'}" class="card" v-for="(v,i) in player1.cards" :key="i">
					<image src="../../static/pkp/back_card.jpg"></image>
					<text v-if="i>=player1.cards-1" class="cardCount">{{player1.cards}}</text>
				</view>
			</view>
			<!-- 玩家准备 -->
			<view class="ready">
				<text v-show="!player1.ready" class="noReady">未准备</text>
				<text v-show="player1.ready" class="readys">已准备</text>
			</view>
			<timer class="timer" v-if="player1.isCurrent&&!isChooseLandlord" />
			<view class="buffer">
				<view class="bufferlist" :style="{'width':player1.buffer.length*upx2px(20)+upx2px(50)+'px'}" v-if="player1">
					<image class="buffer_card" @click.stop="chooseCard(v,i)" :style="cardStyle(v,i)" v-for="(v,i) in player1.buffer" :key="i" :src="`/static/pkp/${v.type}_${v.value}.jpg`"></image>
				</view>
				<view v-if="player1.buffer[0]&&player1.buffer[0].value=='不出'" class="bufferlist">
					<text>不出</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import Timer from '../Timer.vue'
	export default {
		name:"player1",
		components:{
			Timer
		},
		data() {
			return {
				
			};
		},
		computed:{
			...mapState(['player1','gameStart','isChooseLandlord'])
		},
		methods:{
			upx2px(px){
				return uni.upx2px(px);
			},
			cardStyle(v,index){
				return {
					'left':index*uni.upx2px(20)+'px',
					'top':'0',
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.player1{
	width: 150upx;
	height: 100%;
	.wrap{
		position: relative;
		.user_info{
			padding: 10upx 0;
			display: flex;
			align-items: center;
			.user_text{
				margin-left: 10upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.score{
					color: blue;
					font-size: 15upx;
				}
				.username{
					color: white;
					font-size: 15upx;
				}
			}
			image{
				width: 40upx;
				height: 40upx;
				border-radius: 50%;
				border: 4upx solid rgba(0,0,0,0);
			}
			.current{
				border-color: yellow;
			}
		}
		.cardlist{
			width: 100upx;
			height: 100%;
			position: relative;
			.card{
				position: absolute;
				width: 100%;
				height: 65upx;
				left: 0;
				image{
					width: 100%;
					height: 100%;
				}
				.cardCount{
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					color: yellow;
					font-size: 25upx;
				}
			}
		}
		.ready{
			
		}
		.timer{
			position: absolute;
			left: 120upx;
			top: 25vh;
			font-size: 30upx;
			color: orange;
		}
		.buffer{
			.bufferlist{
				position: fixed;
				left: 135upx;
				top: 20vh;
				.buffer_card{
					position: absolute;
					width: 50upx;
					height: 20vh;
				}
				text{
					color: orange;
					font-size: 30upx;
				}
			}
		}
	}
}
</style>
